<template>
  <div class="login-form-container" >
    <el-form :model="form" :rules="rules" ref="loginForm" class="login-form">
      <h2 class="login-form-title">登录</h2>
      <el-form-item label="用户名:" prop="username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="密__码:" prop="password">
        <el-input type="password" v-model="form.password" show-password></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"
                   :loading="loading"
                   :disabled="loading"
                   @click="submitForm">{{ loading ? '正在登录' : '登录' }}
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// 引入Element Plus的相关组件
import { ElForm, ElFormItem, ElInput, ElButton } from 'element-plus';
import axios from "axios";
import setting from "@/setting.js";
import router from "@/router/index.js";
import {jsonApi} from "@/global.js";

export default {
  components: {
    ElForm,
    ElFormItem,
    ElInput,
    ElButton
  },
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      },
      loading: false, // 添加这个属性
    };
  },

  methods: {
    updateHeaderWidth() {
      // 确保this.$refs.header已经存在
      if(window.innerHeight<720){
        this.backgroundHeight = 720;
      }else{
        this.backgroundHeight = window.innerHeight;
      }

      if (window.innerWidth < Math.floor(this.backgroundHeight * (16/9))) {
        this.backgroundWidth = Math.floor(this.backgroundHeight * (16/9));
      } else {
        this.backgroundWidth = window.innerWidth;
      }
      this.headerWidth = this.backgroundWidth / 2; // 设置为header宽度的一半
    },
    async handleLogin(credentials) {
      // 登录逻辑处理...
      try {
        // 发送登录请求到后端API
        const response = await jsonApi('/user/login/', JSON.stringify(credentials),false);
        const data = await response.json();
        // 检查返回的消息
        if (data.message === 'Login successful!') {
          // 登录成功，保存令牌到localStorage或其他持久化存储
          localStorage.setItem('access_token',data.access_token);
          localStorage.setItem('refresh_token', data.refresh_token);
          localStorage.setItem('user_groups', data.user_groups);
         // console.log(data.user_groups);
          // 跳转到主界面，假设主界面路由是'/main'
          this.loading = false;
          await router.push('/main');
        } else {
          // 登录失败处理，例如显示错误消息等
          this.loading = false;
          this.$message.error('登录失败: 用户名或密码有误' );
        }
      } catch (error) {
        // 请求错误处理，例如网络错误、服务器错误等
        console.error(error);
        this.$message.error('登录失败，原因是: ' +error);
        this.loading = false;
      }
    },
    submitForm() {
      this.loading = true;
      this.$refs.loginForm.validate(valid => {
        if (valid) {
            this.handleLogin(this.form);
        } else {
          this.$message.error('表单验证失败!');
          this.loading = false;
          return false;
        }
      });
    }
  }
};
</script>

<style scoped>
.login-form-container {
  width: 400px;
  margin: 0 auto;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

.login-form-title {
  text-align: center;
  margin-bottom: 20px;
}

.el-input__inner {
  border-radius: 5px;
}

.el-button {
  width: 100%;
  margin-top: 20px;
}
</style>